import React, { Component } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

class UpdateConfigDialog extends Component {
  state = {
    account: { name: '', accessKey: '', secretKey: '', region: '' }
  };

  handleSaveNewAccount = () => {
    this.props.updateS3Account(this.state.account);
    this.onCloseDialog();
  };

  handleConfigChange = key => {
    return event => {
      const account = Object.assign({}, this.state.account, {
        [key]: event.target.value
      });
      this.setState({ account });
    };
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentAccount) {
      this.setState({
        account: nextProps.currentAccount
      });
    }
  }

  onCloseDialog = () => {
    this.setState({
      account: {
        name: '',
        accessKey: '',
        secretKey: '',
        region: '',
        defaultBucket: ''
      }
    });
    this.props.onClose();
  };

  render() {
    const { account } = this.state;
    const { open } = this.props;

    return (
      <Dialog
        open={open}
        onClose={this.onCloseDialog}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add S3 Config</DialogTitle>
        <DialogContent>
          <DialogContentText>
            No S3 Configuration found, please add one first
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Name"
            type="text"
            fullWidth
            onChange={this.handleConfigChange('name')}
            value={account.name}
          />
          <TextField
            margin="dense"
            id="accessKey"
            label="Access Key"
            type="text"
            fullWidth
            onChange={this.handleConfigChange('accessKey')}
            value={account.accessKey}
          />
          <TextField
            margin="dense"
            id="secretKey"
            label="Secret Key"
            type="text"
            fullWidth
            onChange={this.handleConfigChange('secretKey')}
            value={account.secretKey}
          />
          <TextField
            margin="dense"
            id="region"
            label="Region"
            type="text"
            fullWidth
            onChange={this.handleConfigChange('region')}
            value={account.region}
          />
          <TextField
            margin="dense"
            id="defaultBucket"
            label="Default Bucket"
            type="text"
            fullWidth
            onChange={this.handleConfigChange('defaultBucket')}
            value={account.defaultBucket}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={this.onCloseDialog} color="primary">
            Cancel
          </Button>
          <Button onClick={this.handleSaveNewAccount} color="primary">
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

export default UpdateConfigDialog;
